<template>
	<view class="container">
		<scroll-view class="scroll-container" scroll-y @scrolltolower="loadMore" :scroll-with-animation="true"
			@scroll="handleScroll" :scroll-top="scrollTop" :show-scrollbar="false">
			<view class="img-container">
				<wd-swiper :list="swiperList" autoplay v-model:current="current" :indicator="{ type: 'dots-bar' }">
				</wd-swiper>
			</view>

			<view class="category-bar">
				<text class="category-title">商品列表</text>
			</view>

			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<navigator :url="'/pages/goods-detail/goods-detail?proid=' + item.proid" class="goods-link">
						<image :src="item.img1" mode="widthFix" class="goods-img"></image>
						<view class="goods-info">
							<view class="goods-name">{{ item.proname }}</view>
							<view class="goods-brand">{{ item.brand }}</view>
							<view class="price-container">
								<text
									class="current-price">¥{{ (item.originprice * item.discount / 10).toFixed(2) }}</text>
								<text class="original-price">¥{{ item.originprice.toFixed(2) }}</text>
							</view>
							<view class="sales-tag">
								<text class="sales">销量 {{ item.sales }}</text>
								<view class="tag" v-if="item.issale === 1">热卖</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="loading" v-if="loading">加载中...</view>
			<view class="no-more" v-if="noMore && !loading">没有更多数据了</view>
		</scroll-view>

		<view class="back-to-top" v-show="showBackTop" @click="backToTop">
			<text class="back-to-top-text">↑</text>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import http from '/utils/request.js'
	import {
		onPullDownRefresh,
		onShow
	} from '@dcloudio/uni-app'
	import {
		setTabBarBadge
	} from "/utils/tabBarHelper.js"

	const current = ref(0)
	const swiperList = ref([])
	const goodsList = ref([])
	const count = ref(1)
	const limitNum = ref(10)
	const loading = ref(false)
	const noMore = ref(false)
	const scrollTop = ref(0)
	const oldScrollTop = ref(0)
	const showBackTop = ref(false)

	async function getBanners() {
		http.get('/banner/list')
			.then(res => {
				if (res.data && res.data.length > 0) {
					swiperList.value = res.data.map(item => item.img)
				}
			})
			.catch(err => {
				console.error(err)
			})
	}

	async function getProList(callback) {
		if (loading.value || noMore.value) return;
		loading.value = true
		http.get('/pro/list', {
				count: count.value,
				limitNum: limitNum.value
			})
			.then(res => {
				setTimeout(() => {
					loading.value = false
					if (res.data && res.data.length > 0) {
						if (count.value > 1) {
							goodsList.value = [...goodsList.value, ...res.data]
						} else {
							goodsList.value = res.data
						}
						count.value++
						if (res.data.length < limitNum.value) {
							noMore.value = true
						}
					} else {
						noMore.value = true
					}

					if (callback) {
						callback()
					}
				}, 1000)
			})
			.catch(err => {
				console.error(err)
				loading.value = false
			})
	}

	const loadMore = () => {
		if (noMore.value || loading.value) return;
		getProList()
	}

	const handleScroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop
		showBackTop.value = oldScrollTop.value > 300
	}

	const backToTop = () => {
		scrollTop.value = oldScrollTop.value
		nextTick(() => {
			scrollTop.value = 0
		})
		showBackTop.value = false
	}

	onPullDownRefresh(async () => {
		count.value = 1
		await getProList(() => {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		})
	})

	onMounted(async () => {
		await getBanners()
		await getProList()
	})

	onShow(() => {
		setTabBarBadge()
	})
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
	}

	.img-container {
		padding: 10rpx 20rpx;
	}

	.category-bar {
		padding: 20rpx;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.scroll-container {
		height: calc(100vh - 100rpx);
		width: 100%;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 20rpx 0 20rpx;
		justify-content: space-between;
	}

	.goods-item {
		width: 48%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.goods-link {
		display: block;
	}

	.goods-img {
		width: 100%;
		height: 300rpx;
		object-fit: cover;
	}

	.goods-info {
		padding: 15rpx;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1.3;
		max-height: 72rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 8rpx;
	}

	.goods-brand {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.price-container {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.current-price {
		font-size: 30rpx;
		color: #e63946;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.sales-tag {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sales {
		font-size: 22rpx;
		color: #999;
	}

	.tag {
		font-size: 20rpx;
		color: #fff;
		background-color: #e63946;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
	}

	.loading,
	.no-more {
		text-align: center;
		padding: 20rpx 20rpx 40rpx 20rpx;
		color: #999;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.back-to-top {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;

		&:active {
			background-color: rgba(0, 0, 0, 0.8);
		}

		.back-to-top-text {
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
</style>